{% extends 'base.html' %}

{% block title %}个人档案{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-user-edit me-2"></i>编辑档案</h5>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.phone.id_for_label }}" class="form-label">手机号</label>
                                {{ form.phone }}
                                {% if form.phone.errors %}
                                <div class="text-danger small">{{ form.phone.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.student_id.id_for_label }}" class="form-label">学号/工号</label>
                                {{ form.student_id }}
                                {% if form.student_id.errors %}
                                <div class="text-danger small">{{ form.student_id.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.department.id_for_label }}" class="form-label">院系/部门</label>
                        {{ form.department }}
                        {% if form.department.errors %}
                        <div class="text-danger small">{{ form.department.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.address.id_for_label }}" class="form-label">地址</label>
                        {{ form.address }}
                        {% if form.address.errors %}
                        <div class="text-danger small">{{ form.address.errors.0 }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.avatar.id_for_label }}" class="form-label">头像</label>
                        {{ form.avatar }}
                        {% if form.avatar.errors %}
                        <div class="text-danger small">{{ form.avatar.errors.0 }}</div>
                        {% endif %}
                        {% if profile.avatar %}
                        <div class="mt-2">
                            <img src="{{ profile.avatar.url }}" class="rounded" style="width: 100px; height: 100px; object-fit: cover;">
                        </div>
                        {% endif %}
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>保存更改
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- 借阅历史 -->
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-history me-2"></i>最近借阅</h6>
            </div>
            <div class="card-body">
                {% if borrow_history %}
                    {% for record in borrow_history %}
                    <div class="d-flex mb-3">
                        {% if record.book.cover_image %}
                            <img src="{{ record.book.cover_image.url }}" class="rounded me-3" style="width: 50px; height: 60px; object-fit: cover;">
                        {% else %}
                            <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 60px;">
                                <i class="fas fa-book text-muted"></i>
                            </div>
                        {% endif %}
                        <div class="flex-grow-1">
                            <h6 class="mb-1">{{ record.book.title }}</h6>
                            <p class="text-muted small mb-1">{{ record.book.author.name }}</p>
                            <small class="text-muted">{{ record.borrow_date|date:"Y-m-d" }}</small>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                <p class="text-muted text-center py-3">暂无借阅记录</p>
                {% endif %}
            </div>
        </div>
        
        <!-- 档案信息 -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>档案信息</h6>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    {% if profile.avatar %}
                        <img src="{{ profile.avatar.url }}" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                    {% else %}
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 100px; height: 100px;">
                            <i class="fas fa-user fa-2x text-muted"></i>
                        </div>
                    {% endif %}
                </div>
                
                <div class="row text-center mb-3">
                    <div class="col-6">
                        <h5 class="text-primary mb-1">{{ profile.get_current_borrowed_count }}</h5>
                        <small class="text-muted">当前借阅</small>
                    </div>
                    <div class="col-6">
                        <h5 class="text-success mb-1">{{ profile.max_borrow_limit }}</h5>
                        <small class="text-muted">最大借阅</small>
                    </div>
                </div>
                
                <hr>
                
                <div class="small">
                    <p><strong>用户名:</strong> {{ user.username }}</p>
                    {% if profile.student_id %}
                    <p><strong>学号/工号:</strong> {{ profile.student_id }}</p>
                    {% endif %}
                    {% if profile.department %}
                    <p><strong>院系/部门:</strong> {{ profile.department }}</p>
                    {% endif %}
                    {% if profile.phone %}
                    <p><strong>手机号:</strong> {{ profile.phone }}</p>
                    {% endif %}
                    {% if profile.address %}
                    <p><strong>地址:</strong> {{ profile.address|truncatechars:30 }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 